<template>
    <div class="video-type-list" v-loading="loading">
        <div class="input-box">
            <el-button type="success" class="btn" @click="beforeAddType">新建</el-button>
        </div>
        <div class="table-box">
            <el-table
                :data="list"
                border
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="ID">
                </el-table-column>
                <el-table-column
                    label="icon">
                    <template slot-scope="scope">
                        <img :src="scope.row.icon" alt="" style="width:50px;height:50px;">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="类型">
                </el-table-column>
                <el-table-column
                    prop="category"
                    label="类型id">
                </el-table-column>
                <el-table-column
                    label="关联视频数">
                    <template slot-scope="scope">
                        <div>{{scope.row.videoNum || 0}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="108"
                    label="创建时间">
                    <template slot-scope="scope">
                        <div style="text-align: center;">{{scope.row.createTime | timeNo0}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="108"
                    label="修改时间">
                    <template slot-scope="scope">
                        <div style="text-align: center;">{{scope.row.updateTime | timeNo0}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div><el-button @click="editorType(scope.row, scope.$index)" type="text" size="small" style="color:#67C23A;">更改</el-button></div>
                        <div><el-button @click="delType(scope.row.category, scope.$index)" type="text" size="small" style="color:#F56C6C;">删除</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="500px">
            <div>icon：</div>
            <uploadOwnImg v-model="currentItem.icon"/>
            <div style="margin-top:10px;">类型名：</div>
            <el-input v-model.trim="currentItem.name" placeholder="请输入游戏类型"></el-input>
            <span slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addType" v-if="title === '新建视频类型'">新 建</el-button>
                <el-button type="primary" @click="updateVideoCategory" v-else>修 改</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="温馨提示"
            :visible.sync="delVideoDialog">
            <span>确认要删除该类型么？</span>
            <span slot="footer">
                <el-button @click="delVideoDialog = false">取 消</el-button>
                <el-button type="primary" @click="confimDelType">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            list: [],
            loading: false,
            title: '新建视频类型', // 编辑、新建类型弹窗title
            dialogVisible: false,
            delVideoDialog: false,
            currentItem: {
                icon: '', // icon
                name: '', // 名称
                createTime: '', // 创建时间
                updateTime: '' // 更新时间
            }
        }
    },

    created () {
        this.getList()
    },

    methods: {
        // 获取列表
        async getList () {
            this.loading = true
            let res = await this.$http.post('/video/findVideoCategory')
            if (res.code === '0') {
                this.list = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 新建弹窗
        beforeAddType () {
            this.resetParams()
            this.title = '新建视频类型'
            this.dialogVisible = true
        },

        // 新建视频类型
        async addType () {
            let time = formatDate(new Date(), 'YYYY-MM-DD HH:MM:SS')
            this.currentItem.createTime = time
            this.currentItem.updateTime = time
            let res = await this.$http.post('/video/addVideoCategory', this.currentItem)
            if (res.code === '0') {
                this.list.push(res.data)
                this.$message({
                    type: 'success',
                    message: '新建成功！'
                })
                this.resetParams()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.dialogVisible = false
        },

        // 编辑类型
        editorType (item, index) {
            this.beforeCurrentItem = item
            this.currentIndex = index
            this.currentItem = JSON.parse(JSON.stringify(item))
            this.title = '编辑视频类型'
            this.dialogVisible = true
        },

        // 修改视频类型
        async updateVideoCategory () {
            if (!this.currentItem.icon) {
                this.$message({
                    type: 'error',
                    message: '请上传icon'
                })
                return
            }
            if (!this.currentItem.name) {
                this.$message({
                    type: 'error',
                    message: '请输入类型名'
                })
                return
            }
            let res = await this.$http.post('/video/updateVideoCategory', this.currentItem)
            if (res.code === '0') {
                // this.beforeCurrentItem.name = this.currentItem.name
                // this.beforeCurrentItem.icon = this.currentItem.icon
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
                this.getList()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.dialogVisible = false
        },

        // 取消编辑或新建
        cancleType () {
            this.dialogVisible = false
        },

        // 删除类型
        delType (category, index) {
            this.currentCategory = category
            this.currentIndex = index
            this.delVideoDialog = true
        },

        // 确认删除
        async confimDelType () {
            let res = await this.$http.post('/video/deleteVideoCategory', {
                category: this.currentCategory
            })
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
                this.list.splice(this.currentIndex, 1)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.delVideoDialog = false
        },

        resetParams () {
            this.currentItem = {
                id: '', // id
                category: '', // 类型
                icon: '', // icon
                name: '', // 名称
                videoNum: '', // 关联视频数
                createTime: '', // 创建时间
                updateTime: '' // 更新时间
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .video-type-list {
        .table-box {
            margin-top: 10px;
        }
        /deep/ .el-dialog__body {
            padding: 0 20px;
        }
    }
</style>
